<template>
  <div>
    <div class="flex items-center">
      <!-- <span>版本列表</span> -->
      <this-search ref="search" @on-search="fetch(1)" @on-add="onAdd" />
    </div>
    <div class="mb-4">
      <el-tag closable size="medium" @close="closeTarget" v-show="targetName">
        群：{{ targetName }} 的消息
      </el-tag>
    </div>
    <el-table class="mt-2" stripe v-loading="loading" :data="rows">
      <!-- <el-table-column prop="id" label="ID" width="180"> </el-table-column> -->

      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column prop="typeString" label="会话类型"> </el-table-column>
      <el-table-column prop="contentTypeString" label="消息类型">
      </el-table-column>
      <el-table-column prop="from" label="发送者ID"> </el-table-column>
      <el-table-column prop="target" label="接受者ID"> </el-table-column>
      <el-table-column prop="fromName" label="发送者昵称"> </el-table-column>
      <el-table-column prop="targetName" label="接受者昵称"> </el-table-column>
      <el-table-column prop="searchableKey" label="搜索内容"> </el-table-column>
      <el-table-column prop="content" label="内容"> </el-table-column>

      <el-table-column label="时间">
        <template slot-scope="{ row }">
          {{ row.dt | time2str }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-dropdown>
            <span class="el-dropdown-link"> 更多 </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="viewGroupMsg(row)"
                >查看群消息</el-dropdown-item
              >
              <el-dropdown-item @click.native="recall(row)"
                >撤回</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <the-page ref="page" @change="fetch" />
  </div>
</template>

<script>
import rowsCurl from "@/mixins/rows-curl";
import thePage from "@/components/page.vue";
import thisSearch from "./search.vue";

export default {
  components: { thisSearch, thePage },
  mixins: [rowsCurl],
  data() {
    return {
      uri: {
        list: "message/list",
        del: "/user/destroyUser",
      },
      targetName: "",
    };
  },
  computed: {},
  created() {
    let params = this.$route.query;

    if (params.name) {
      this.targetName = params.name;
    }
  },
  methods: {
    recall(row) {
      this.axios
        .post("message/recall", {
          messageId: row.mid,
        })
        .then((res) => {
          if (res.retCode != 0) {
            return this.$message.error(res.retMsg);
          }
          this.fetch(1);
          this.$message.success("操作成功!");
          // this.loading = false;
        });
    },
    viewGroupMsg(row) {
      this.$refs.search.targetId = row.target;
      this.targetName = row.targetName;
      this.fetch(1);
    },
    closeTarget() {
      this.targetName = "";
      this.$refs.search.targetId = null;
      this.fetch(1);
    },
  },
};
</script>

<style>
</style>